<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<style type="text/css">
#preview {
	margin: 0 auto;
	width: 200px;
	margin-bottom: 5px;
	text-align: center;
}

.imgg {
	width: 85px;
	height: 85px;
}

.in1 {
	width: 100px;
	height: 20px;
	font-size: 14px;
	background-color: #4e72b8;
	color: white;
	border-radius: 3px;
}

.div1 {
	text-align: center;
}
</style>
<script type="text/javascript">
	function check() {
		var a = document.getElementById("img_up").value;
		var b = a == "";
		if (b == true) {
			alert("请选择图片！");
			return false;
		}
		if (b == false) {
			return true;
		}
	}

	function check(file) {
		var aa = document.getElementById("img_up").value.toLowerCase().split(
				'.');//以“.”分隔上传文件字符串
		var bb = document.getElementById("img_up").value;
		if (bb == "" || bb == null) {
			return true;
		} else {
			if (aa[aa.length - 1] == 'gif' || aa[aa.length - 1] == 'jpg'
					|| aa[aa.length - 1] == 'bmp' || aa[aa.length - 1] == 'png') {//判断图片格式{alert('图片格式正确！');
				preview(file);
				return true;
			} else {
				alert('对不起，你选择的图片格式不对\n图片格式应为*.jpg、*.gif、*.bmp、*.png');
				return false;
			}
		}
	}

	function checkk() {
		var aa = document.getElementById("img_up").value.toLowerCase().split(
				'.');//以“.”分隔上传文件字符串
		var bb = document.getElementById("img_up").value;
		if (bb == "" || bb == null) {
			return true;
		} else {
			if (aa[aa.length - 1] == 'gif' || aa[aa.length - 1] == 'jpg'
					|| aa[aa.length - 1] == 'bmp' || aa[aa.length - 1] == 'png') {//判断图片格式{alert('图片格式正确！');
				return true;
			} else {
				alert('对不起，你选择的图片格式不对\n图片格式应为*.jpg、*.gif、*.bmp、*.png');
				return false;
			}
		}
	}
</script>
<div class="div2">
	<div style="text-align: center;">
		<h4>上传图片</h4>
	</div>
	<form id="form_img" action="ImageUploadServlet" method="post"
		enctype="multipart/form-data" onsubmit="return checkk()">
		<div id="preview"></div>
		<div class="div1">
			<input type="hidden" name="id" value="${param.id}"> 请选择一张图片：<input
                name="img" type="file" onchange=check(this); id="img_up"> <input
				type="submit" onclick="upload()" id="form_img_submit" value="上传"
				class="in1">
		</div>
	</form>
</div>
<script type="text/javascript">
	//上传前预览图片
	function preview(file) {
		var prevDiv = document.getElementById('preview');
		if (file.files && file.files[0]) {
			var reader = new FileReader();
			reader.onload = function(evt) {
				prevDiv.innerHTML = '<img class="imgg" src="' + evt.target.result + '" />';
			};
			reader.readAsDataURL(file.files[0]);
		} else {
			prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
		}
	}
</script>